<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/common/taglibs.jsp"%>

<!DOCTYPE html>
<html class='no-js' lang='cn'>
  <jsp:include page="/head.jsp"/>
  
  
  <body class='main page' onmouseover="">
  <jsp:include page="/top.jsp"/>
  
  <div id='wrapper'>
      <section id='tools'>
        <ul class='breadcrumb' id='breadcrumb'>
          <li class='title'>调试工具</li>
        </ul>
      </section><!-- Sidebar -->
  <jsp:include page="/sidebar.jsp"/>
    	
     <!-- Content -->
     <div id='content'>
          <fieldset>
          	<legend>参数配置</legend>
            <div class='form-group row'>
             <div class='col-lg-10'>
               <input class='form-control' placeholder='输入url' type='text' name="url" id="url">
             </div>
             <div class='col-lg-1'>
             	 <label class="checkbox">
			    	<input type="checkbox" name="ajax" id="ajax">  AJAX
			     </label>
             </div>
             <div class='col-lg-1'>
                 <button class='btn btn-info' type="button" id="gathor">抓取</button>
             </div>
            </div>
          </fieldset>
          
          <div class="btn-group" role="group" aria-label="...">
		    <button type="button" class="btn btn-default" onclick="$('#source_f').hide();$('#source_p').show();">可视化</button>
		    <button type="button" class="btn btn-default" onclick="$('#source_f').show();$('#source_p').hide();">源代码</button>
		  </div>
          <fieldset id='source_f' style="display: none">
          	<div class='form-group row'>
          	 <div class='col-lg-12' >
                 <textarea class='form-control' style="height:500px;" name="html" id='html'></textarea>
             </div>
            </div>
          </fieldset>
          
          <fieldset id='source_p'>
          	<div class='form-group row'>
          	 <div class='col-lg-12' >
          	 	<div style="width:100%; height:500px; overflow:auto; border:1px solid #000000;" id="html_view" >
          	 	</div>
             </div>
            </div>
          </fieldset>
          <fieldset>
            <div class='form-group row'>
             <div class='col-lg-9'>
               <input class='form-control' placeholder='输入url' type='text' name="select" id="select">
             </div>
             <div class='col-lg-1'>
                 <button class='btn btn-info' type="button" id="extract">抽取元素</button>
             </div>
             <div class='col-lg-1'>
                 <button class='btn btn-success' type="button" id="explan">分析html</button>
             </div>
             <div class='col-lg-1'>
                 <button class='btn btn-success' type="button" id="auto_extract">自动抽取</button>
             </div>
            </div>
          </fieldset>
          <fieldset>
          	<div class='form-group row'>
          	 <div class='col-lg-12'>
                 <textarea class='form-control' rows="10" name="result" id='result'></textarea>
             </div>
            </div>
          </fieldset>
     </div>
     
  </div>

  
  <jsp:include page="/foot.jsp"/>
  
  <script src="${ctx }/js/beautify.js"></script>
  
  <script type="text/javascript">
  
  	  function reloadPage(){
  		$("#html_view").find("*").each(function(index){
			$(this).mouseenter(function(){
				$(this).css("background-color","yellow");
			});
			
			$(this).mouseleave(function(){
				$(this).css("background-color","");
			});
  		}) ;
  	  }
  
  	  
  	
  	
	  $("#gathor").click(function(){
			$.getJSON("${ctx }/debug/gathor?"+$("#url").serialize()+"&"+$("#ajax").serialize(),function(result) {
				$("#html").val(result.html)
				$("#html_view").html(result.html) ;
				reloadPage() ;
			}, "json").error(function(result) {
				bootbox.alert("请求失败!");
			});
		}) ;
	  
	  $("#extract").click(function(){
			$.getJSON("${ctx }/debug/extract?"+$("#select").serialize()+"&"+$("#html").serialize(),function(result) {
				var opts= {} ;
        		opts.wrap_line_length = 20;
        		$("#result").val(js_beautify(JSON.stringify(result),opts)) ;
			}, "json").error(function(result) {
				bootbox.alert("请求失败!");
			});
		}) ;
	  
	  
	  
  </script>
    
  </body>
</html>
